<template>
    <el-container class="contain">
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1']">
            <el-submenu index="1">
              <template #title>视频分类</template>
              <el-menu-item style="background-color: rgba(126, 175, 151, 0.132) ;font-size: 15px;font-weight: bold;" index="1-1">电影</el-menu-item>
              <el-menu-item style="background-color: rgba(126, 175, 151, 0.132) ;font-size: 15px;font-weight: bold;" index="1-2">电视剧</el-menu-item>
              <el-menu-item style="background-color: rgba(126, 175, 151, 0.132) ;font-size: 15px;font-weight: bold;" index="1-3">纪录片</el-menu-item>
              <el-menu-item style="background-color: rgba(126, 175, 151, 0.132) ;font-size: 15px;font-weight: bold;" index="1-4">其他</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <el-card class="video-card">
            <video ref="videoPlayer" controls width="100%" height="auto">
              <source :src="currentVideo.src" :type="currentVideo.type">
              您的浏览器不支持 HTML5 视频。
            </video>
            <div class="video-info">
              <el-row>
                <el-col :span="12">
                  <span class="video-title">{{ currentVideo.title }}</span>
                </el-col>
                <el-col :span="12">
                  <el-button style="font-size: 15px;" type="text" @click="prevVideo">上一个</el-button>
                  <el-button style="font-size: 15px;" type="text" @click="nextVideo">下一个</el-button>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-main>
      </el-container>
      <el-footer>版权所有 ©智思云有限公司 </el-footer>
    </el-container>
  </template>
  <script>
  export default {
    data() {
      return {
        videoList: [
          {
            title: '视频1',
            src: 'https://example.com/video1.mp4',
            type: 'video/mp4'
          },
          {
            title: '视频2',
            src: 'https://example.com/video2.mp4',
            type: 'video/mp4'
          }
        ],
        currentVideoIndex: 0,
        currentVideo: {
          title: '',
          src: '',
          type: ''
        }
      };
    },
    mounted() {
      this.currentVideo = this.videoList[this.currentVideoIndex];
    },
    methods: {
      prevVideo() {
        if (this.currentVideoIndex > 0) {
          this.currentVideoIndex--;
          this.currentVideo = this.videoList[this.currentVideoIndex];
        }
      },
      nextVideo() {
        if (this.currentVideoIndex < this.videoList.length-1) {
          this.currentVideoIndex++;
          this.currentVideo = this.videoList[this.currentVideoIndex];
        }
      }
    }
  };
  </script>
  
  <style scoped>
   .contain{
    height: auto;
    width: 1345px;
    margin-left: 180px;
    background-color: rgba(126, 175, 151, 0.132);
  }
  .video-card {
    margin-top: 20px;
  }
  .video-title {
    font-size: 20px;
    font-weight: bold;
  }
  </style>